<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="beforeDialogClose">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="配置名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入配置名称" />
        </el-form-item>
        <el-form-item label="层级" prop="level">
          <el-select v-model="ruleForm.level" placeholder="请选择层级" style="width: 100%">
            <el-option
              v-for="item in levelOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="ruleForm.pid != 0" label="参数" prop="config_param">
          <el-checkbox-group v-model="ruleForm.config_param">
            <el-checkbox v-for="item in configListData" :key="item.id" :label="item.id">{{ item.label_name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="描述" prop="describe_before">
          <el-input v-model="ruleForm.describe_before" type="textarea" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="展示描述" prop="is_describe">
          <el-select v-model="ruleForm.is_describe" placeholder="请选择展示描述" style="width: 100%">
            <el-option
              v-for="item in isDescribeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="display: flex;justify-content: flex-end">
          <el-button type="primary" size="mini" @click="resetForm">重置</el-button>
          <el-button type="primary" size="mini" @click="addOrEdit">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { reportAllList, reportConfigCreate, reportConfigDetail, reportConfigUpdate } from '@/api/report'

// 表单初始数据
const defaultFormData = {
  name: '',
  level: '',
  describe_before: '',
  is_describe: '',
  config_param: [],
  pid: 0
}

export default {
  name: 'viewReportDetail',
  data() {
    return {
      dialogVisible: false,
      ruleForm: {},
      levelOptions: [{
        value: 1,
        label: '一级'
      }, {
        value: 2,
        label: '二级'
      }, {
        value: 3,
        label: '三级'
      }],
      isDescribeOptions: [{
        value: 1,
        label: '展示'
      }, {
        value: 0,
        label: '不展示'
      }],
      rules: {
        name: [
          { required: true, message: '请输入参数名称', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '请输入参数标识', trigger: 'blur' }
        ],
        describe_before: [
          { required: true, message: '请输入参数类型', trigger: 'blur' }
        ],
        is_describe: [
          { required: true, message: '请输入参数类型', trigger: 'blur' }
        ]
      },
      // 配置项数据
      configListData: [],
      op: 0,
      title: ''
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // op代表操作，从列表页面传过来。0是新增，1是编辑
    open(op, id) {
      this.dialogVisible = true
      this.op = op
      if (this.op === 0) {
        this.title = '新增顶级'
        this.ruleForm = { ...defaultFormData }
      } else if (op === 1) {
        this.title = '编辑'
        // 编辑
        // 调详情调接口，获取是数据
        reportConfigDetail({ id: id }).then(res => {
          this.ruleForm = res.data
          // 处理参数回填
          const configParamArr = []
          if (res.data.config_param != null && res.data.config_param.length > 0) {
            res.data.config_param.forEach(configData => {
              configParamArr.push(configData.param_id)
            })
          }
          this.ruleForm.config_param = configParamArr
        })
      } else if (op === 2) {
        this.title = '新增子级'
        this.ruleForm = { ...defaultFormData }
        this.ruleForm.pid = id
      }
    },
    getList() {
      reportAllList(this.config_param).then(res => {
        this.configListData = res.data.list
      })
    },
    // 新增、编辑
    addOrEdit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          // 处理参数字段数据
          if (this.ruleForm.config_param != null && this.ruleForm.config_param.length > 0) {
            // 把ID组成数组
            const configParamArr = []
            this.ruleForm.config_param.forEach(configId => {
              this.configListData.forEach(configData => {
                if (configId === configData.id) {
                  configParamArr.push({
                    param_id: configData.id,
                    column_name: configData.column_name
                  })
                }
              })
            })

            this.ruleForm.config_param = configParamArr
          }
          if (this.op === 1) {
            //  是编辑
            reportConfigUpdate(this.ruleForm).then(res => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.$emit('confirm')
              this.dialogVisible = false
              this.$refs['ruleForm'].resetFields()
            })
          } else {
            //  是新增
            reportConfigCreate(this.ruleForm).then(res => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$emit('confirm')
              this.dialogVisible = false
              this.$refs['ruleForm'].resetFields()
            })
          }
        }
      })
    },
    // 关闭窗口时清空数据
    beforeDialogClose(done) {
      this.resetForm()
      done()
    },
    // 表单重置
    resetForm() {
      this.$refs['ruleForm'].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
